@charset "utf-8";
@import "../../../assets/scss/pxVw";

$designWidth: 1920;
.luckDraw {

}

.luckFlop {
  background: url("../../../assets/images/luckDraw/bg_flop.jpg") center top no-repeat;
  background-size: auto 100%;
  height: vw(760);
  .logoImg {
    margin-top: vw(21);
    img {
      width: auto;
      height: vw(233);
      margin: 0 auto;
    }
  }
  .luckFlopBox {
    width: vw(900);
    height: vw(476);
    background: url("../../../assets/images/luckDraw/horn3.png") left top no-repeat, url("../../../assets/images/luckDraw/horn4.png") right top no-repeat, url("../../../assets/images/luckDraw/horn1.png") left bottom no-repeat, url("../../../assets/images/luckDraw/horn2.png") right bottom no-repeat, rgba(24, 24, 28, .95);
    background-size: 15% 15%;
    margin: 0 auto;
    border: 1px solid linear-gradient(-136deg, #D0A979 100%, #FFE3BF 100%, #DDC09C 100%);
    border: 1px solid #D0A979;
    padding: vw(72) vw(80) vw(38);
    overflow: visible;
    .luckFlopTitle {
      position: absolute;
      left: 50%;
      top: vw(-22);
      transform: translateX(-50%);
      P {
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        padding: 0 vw(20);
        &:first-child {
          background-image: linear-gradient(-180deg, #DE3048 7%, #97000F 100%);
          box-shadow: 0 2px 4px 0 rgba(57, 46, 15, 0.69), inset 0 1px 5px 0 #992F31;
          border-radius: 100px;
          line-height: vw(36);
          height: vw(44);
          border: 2px solid #FFE3BF;
          font-size: 14px;
          color: #FFFFFF;
          letter-spacing: 1.11px;
        }
        &:last-child {
          margin-top: vw(12);
          line-height: vw(22);
        }
        span {
          color: #FFE3BF;
        }
      }
    }
    .brandList {
      width: 100%;
      height: 100%;
      .brandListItem {
        width: 18%;
        height: 48%;
        position: absolute;
        transform-style: preserve-3d;
        //margin-right: 2.5%;
        //margin-top:2%;
        //&:nth-child(5n){
        //  margin-right: 0;
        //}
        &.transitionCla{
          &:nth-child(1){
            transition: 0.36s ease-in-out;
          }
          &:nth-child(2){
            transition: 0.36s ease-in-out 0.1s;
          }
          &:nth-child(3){
            transition: 0.36s ease-in-out 0.2s;
          }
          &:nth-child(4){
            transition: 0.36s ease-in-out 0.3s;
          }
          &:nth-child(5){
            transition: 0.36s ease-in-out .4s;
          }
          &:nth-child(6){
            transition: 0.36s ease-in-out .5s;
          }
          &:nth-child(7){
            transition: 0.36s ease-in-out .6s;
          }
          &:nth-child(8){
            transition: 0.36s ease-in-out .7s;
          }
          &:nth-child(9){
            transition: 0.36s ease-in-out .8s;
          }
          &:nth-child(10){
            transition: 0.36s ease-in-out .9s;
          }
        }
        &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5) {
          top: 0;
        }
        &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9), &:nth-child(10) {
          top: 51%;
        }
        &:nth-child(1), &:nth-child(6) {
          left: 0;
        }
        &:nth-child(2), &:nth-child(7) {
          left: 20.5%;
        }
        &:nth-child(3), &:nth-child(8) {
          left: 41%;
        }
        &:nth-child(4), &:nth-child(9) {
          left: 61.5%;
        }
        &:nth-child(5), &:nth-child(10) {
          left: 82%;
        }

        .brandBack,.noWinBox,.winBox{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .brandBack{
          background: url("../../../assets/images/luckDraw/bg_brand.png") center no-repeat;
          background-size: auto 100%;
          z-index: 10;
        }
        .noWinBox{
          background: url("../../../assets/images/luckDraw/noWinning.png") center no-repeat;
          background-size: auto 100%;
        }
        .winBox{
          background: url("../../../assets/images/luckDraw/redPacket.png") center no-repeat;
          background-size: auto 100%;
          .winTxtBox {
            margin-top: vw(26);
            p {
              text-align: center;
              font-size: vw(18);
              color: #fff;
              line-height: vw(28);
              span {
                font-size: vw(28);
                font-weight: 600;
              }
            }
          }
        }
        &.start {
          left: 41%;
          top: 25%;
          //transform: translate(-50%, -50%);
        }
        &.end{
          &:nth-child(1){
            z-index: 10;
          }
          &:nth-child(2){
            z-index: 9;
          }
          &:nth-child(3){
            z-index: 8;
          }
          &:nth-child(4){
            z-index: 7;
          }
          &:nth-child(5){
            z-index: 6;
          }
          &:nth-child(6){
            z-index: 5;
          }
          &:nth-child(7){
            z-index: 4;
          }
          &:nth-child(8){
            z-index: 3;
          }
          &:nth-child(9){
            z-index: 2;
          }
          &:nth-child(10){
            z-index: 1;
          }
        }
      }
    }
  }
}

.rewardHistory {
  background-image: radial-gradient(50% 67%, #1B1B25 0%, #181818 68%);
  box-shadow: inset 0 40px 100px 0 rgba(0, 0, 0, 0.50);
  height: vw(660);
  padding: vw(52) 0 vw(25);
  overflow: visible;
  .rewardHistoryBox {
    width: 100%;
    height: 100%;
    overflow: visible;
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: vw(-34);
      transform: translateX(-50%);
      width: vw(68);
      height: 100%;
      background: url("../../../assets/images/luckDraw/his_cen.png") center top no-repeat;
      background-size: 100% auto;

    }
    .playCount {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      text-align: center;
      padding: 0 vw(20);
      background-image: linear-gradient(-180deg, #DE3048 7%, #97000F 100%);
      box-shadow: 0 2px 4px 0 rgba(57, 46, 15, 0.69), inset 0 1px 5px 0 #992F31;
      border-radius: 100px;
      line-height: vw(40);
      height: vw(44);
      border: 2px solid #FFE3BF;
      font-size: 14px;
      color: #FFFFFF;
      span {
        color: #FFE3BF;
      }
    }
    .winRecord,
    .gameRule {
      width: 48%;
      height: 100%;
      margin-right: 2%;
      position: relative;
      .historyBoxTitle {
        position: absolute;
        left: 50%;
        top: vw(60);
        transform: translateX(-50%);
        font-size: 16px;
        color: #CEAE86;
        overflow: visible;
        &::after {
          content: '';
          position: absolute;
          position: absolute;
          left: 50%;
          top: vw(-24);
          transform: translateX(-50%);
          width: vw(18);
          height: vw(18);
          background: url("../../../assets/images/luckDraw/point.png") center no-repeat;
          background-size: 100% auto;
        }
      }
    }
    .winRecord {
      background: url("../../../assets/images/luckDraw/horn1.png") left bottom no-repeat, url("../../../assets/images/luckDraw/horn4.png") right top no-repeat;
      background-size: 20% 20%;
      padding: vw(125) vw(96) vw(64);
      .winRecordList {
        width: 100%;
        height: 100%;
        .vueSeamless{
          overflow: visible;
        }
        .winRecListItem {
          p {
            font-size: 14px;
            color: #CEAE86;
            text-align: center;
            line-height: vw(40);
            &:first-child,&:last-child{
              position: absolute;
              top: 0;
            }
            &:first-child{
              left: 0;
            }
            &:last-child{
              right: 0;
            }
          }
        }
      }
    }
    .gameRule {
      background: url("../../../assets/images/luckDraw/horn3.png") left top no-repeat, url("../../../assets/images/luckDraw/horn2.png") right bottom no-repeat;
      background-size: 20% 20%;
      margin-right: 0;
      padding: vw(125) vw(126) vw(64);
      .gameRuleInfo {
        p {
          font-size: 14px;
          color: #CEAE86;
          line-height: 22px;
          //white-space: nowrap;
          text-align: justify;
          min-width: 255px;
          max-width: vw(400);
        }
      }
      .gameRuleCon {
        //width:vw(500);
        //margin: 0 auto;
        //min-width:vw(500);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      .gameRuleTabUl {
        margin-top: vw(50);
      }
      .gameRuleTab {
        p {
          flex: 1;
          -webkit-flex: 1;
          -o-flex: 1;
          -mz-flex: 1;
          -s-flex: 1;
          line-height: 26px;
          font-size: 14px;
          color: #CEAE86;
          &:first-child {
            text-align: left;
          }
          &:nth-child(3) {
            text-align: center;
          }
        }
      }
    }
  }
}